<template>
<div class="wrapper">
    <div class="boxWrapper tabbox">
        <el-tabs v-model="currentName">
            <el-tab-pane label="流域管理" name="1">
                <span slot="label"><i class="iconfont">&#xe7a8;</i> 流域管理</span>
                <div class="action-bar">
                    
                    <el-tag type="info" class="stat-tag">
                        <i class="el-icon-collection"></i>
                        当前共有 {{ basinList.length }} 个流域
                    </el-tag>

                    <el-button 
                        type="primary" 
                        size="small" 
                        @click="handleEditBasin(null)" 
                        icon="el-icon-plus"
                        v-if="permissions.showRoleAdd"
                    >
                        新增流域
                    </el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="电站管理" name="2">
                <span slot="label"><i class="iconfont">&#xe855;</i> 电站管理</span>
            </el-tab-pane>
        </el-tabs>
    </div>
    
    <div class="basin-management" v-show="currentName == '1'">
        <!-- 流域列表 -->
        <div class="basin-list">
        <el-row :gutter="10">
            <el-col 
            :xs="24" :sm="12" :md="8" :lg="6" 
            v-for="basin in basinList" 
            :key="basin.id"
            >
            <div class="basin-card-wrapper">
                <el-card class="basin-card" shadow="hover">
                <div class="card-header">
                    <div class="basin-icon-wrapper" :class="getBasinColor(basin)">
                    <i class="iconfont basin-icon">&#xe7a8;</i>
                    </div>
                    <div class="basin-info">
                    <h4 class="basin-name">{{ basin.basinName }}</h4>
                    <div class="basin-id">
                        <i class="el-icon-document"></i>
                        ID: {{ basin.id }}
                    </div>
                    
                    </div>
                </div>
                
                <div class="coordinate-info">
                    <div class="info-section">
                    <div class="section-title">
                        <i class="el-icon-location-outline"></i>
                        <span>坐标信息详情</span>
                    </div>
                    <div class="coordinate-content">
                        <div>
                            <div class="coordinate-row detailed">
                            <div class="coord-type">
                                <i class="el-icon-top-left"></i>
                                左上经度
                            </div>
                            <div class="coord-value detailed">
                                {{ basin.leftLongitude.toFixed(6) }}
                            </div>
                        </div>
                        <div class="coordinate-row detailed">
                            <div class="coord-type">
                                <i class="el-icon-top-left"></i>
                                左上纬度
                            </div>
                            <div class="coord-value detailed">
                                {{ basin.leftLatitude.toFixed(6) }}
                            </div>
                        </div>
                        </div>
                        <div>
                            <div class="coordinate-row detailed">
                            <div class="coord-type">
                                <i class="el-icon-bottom-right"></i>
                                右下经度
                            </div>
                            <div class="coord-value detailed">
                                {{ basin.rightLongitude.toFixed(6) }}
                            </div>
                        </div>
                        <div class="coordinate-row detailed">
                            <div class="coord-type">
                                <i class="el-icon-bottom-right"></i>
                                右下纬度
                            </div>
                            <div class="coord-value detailed">
                                {{ basin.rightLatitude.toFixed(6) }}
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                    
                    <!-- 坐标信息摘要 -->
                    <div class="coordinate-summary">
                    <div class="summary-item">
                        <span class="summary-label">经度范围:</span>
                        <span class="summary-value">
                        {{ Math.min(basin.leftLongitude, basin.rightLongitude).toFixed(4) }} - 
                        {{ Math.max(basin.leftLongitude, basin.rightLongitude).toFixed(4) }}
                        </span>
                    </div>
                    <div class="summary-item">
                        <span class="summary-label">纬度范围:</span>
                        <span class="summary-value">
                        {{ Math.min(basin.leftLatitude, basin.rightLatitude).toFixed(4) }} - 
                        {{ Math.max(basin.leftLatitude, basin.rightLatitude).toFixed(4) }}
                        </span>
                    </div>
                    </div>
                </div>
                
                <div class="card-footer">
                    <div class="action-buttons">
                    <el-tooltip content="编辑流域信息" placement="top">
                        <el-button 
                        type="primary" 
                        size="mini" 
                        @click="handleEditBasin(basin)" 
                        icon="el-icon-edit"
                        class="edit-btn"
                        v-if="permissions.showRoleEdit"
                        >
                        编辑流域信息
                        </el-button>
                    </el-tooltip>
                    
                    <el-tooltip content="删除流域" placement="top">
                        <el-button 
                        type="danger" 
                        size="mini" 
                        @click="handleDeleteBasin(basin.id)" 
                        icon="el-icon-delete"
                        class="delete-btn"
                        v-if="permissions.showRoleDel"
                        >
                        删除流域
                        </el-button>
                    </el-tooltip>
                    </div>

                </div>
                </el-card>
            </div>
            </el-col>
        </el-row>
        </div>
        <!-- 流域编辑对话框 -->
        <el-dialog 
          :title="isEditing ? '编辑流域' : '新增流域'" 
          :visible.sync="dialogVisible" 
          width="600px"
          :before-close="handleDialogClose"
          v-dialogDrag
          class="basin-dialog"
        >
          <el-form 
            ref="basinForm" 
            :model="formData" 
            :rules="formRules" 
            label-width="120px"
            size="medium"
            class="basin-form"
          >
            <el-form-item label="流域名称" prop="basinName">
              <el-input 
                v-model="formData.basinName" 
                placeholder="请输入流域名称"
                maxlength="50"
                show-word-limit
                prefix-icon="el-icon-edit"
              />
              <div class="form-tips">建议使用有意义的名称，如"长江流域"、"黄河流域"等</div>
            </el-form-item>
            
            <el-divider content-position="left">
              <i class="el-icon-location-information"></i>
              坐标范围设置
            </el-divider>
            
            <div class="coordinate-tips">
              <i class="el-icon-warning-outline"></i>
              <span>请准确设置流域的坐标范围，这将影响后续功能的使用</span>
            </div>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="左上经度" prop="leftLongitude">
                  <el-input-number 
                    v-model="formData.leftLongitude" 
                    :min="-180" 
                    :max="180" 
                    :precision="6"
                    controls-position="right"
                    style="width: 100%"
                    placeholder="请输入经度"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="左上纬度" prop="leftLatitude">
                  <el-input-number 
                    v-model="formData.leftLatitude" 
                    :min="-90" 
                    :max="90" 
                    :precision="6"
                    controls-position="right"
                    style="width: 100%"
                    placeholder="请输入纬度"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="右下经度" prop="rightLongitude">
                  <el-input-number 
                    v-model="formData.rightLongitude" 
                    :min="-180" 
                    :max="180" 
                    :precision="6"
                    controls-position="right"
                    style="width: 100%"
                    placeholder="请输入经度"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="右下纬度" prop="rightLatitude">
                  <el-input-number 
                    v-model="formData.rightLatitude" 
                    :min="-90" 
                    :max="90" 
                    :precision="6"
                    controls-position="right"
                    style="width: 100%"
                    placeholder="请输入纬度"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            
          </el-form>
          
          <div class="dialog-footer">
            <el-button @click="handleDialogClose" icon="el-icon-circle-close" size="small" class="cancel-btn">
              取消
            </el-button>
            <el-button 
              type="primary" 
              @click="handleSaveBasin" 
              :loading="saving"
              icon="el-icon-circle-check"
              size="small"
              class="confirm-btn"
            >
              {{ saving ? '保存中...' : '保存配置' }}
            </el-button>
          </div>
        </el-dialog>
    </div>

    <stationPage v-if="currentName == '2'" :showRoleAdd="permissions.showRoleAdd" :showRoleDel="permissions.showRoleDel" :showRoleEdit="permissions.showRoleEdit"/>

</div>
</template>

<script>
import bus from '@/utils/eventBus.js';
import { GetAllBasin, AddBasin, EditBasin, DelBasin } from "@/api/https";
import permissionMixin from '@/utils/permission.js'
import stationPage from '@/components/page/setting/StationManagement.vue'
export default {
  name: 'stationManagement',
  mixins: [permissionMixin],
  components:{stationPage},
  data() {
    return {
        currentName:'1',
        basinList: [],
        dialogVisible: false,
        isEditing: false,
        saving: false,
        formData: {
            id: '',
            basinName: '',
            index: 0,
            leftLongitude: 0,
            leftLatitude: 0,
            rightLongitude: 0,
            rightLatitude: 0
        },
        formRules: {
            basinName: [
            { required: true, message: '请输入流域名称', trigger: 'blur' },
            { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
            ],
            leftLongitude: [
            { required: true, message: '请输入左上经度', trigger: 'blur' }
            ],
            leftLatitude: [
            { required: true, message: '请输入左上纬度', trigger: 'blur' }
            ]
        }
    };
  },
  mounted() {
     bus.$emit('showBasin', false);
    this.loadBasinData();
  },
  activated(){
    bus.$emit('showBasin', false);
  },
  computed: {
    permissions() {
        return this.getPermissions() || {}
    }
  },
  methods: {
    loadBasinData() {
        GetAllBasin({ ORGID: 0 }).then(res=>{
            if(res.isSuccess && res.data.length > 0){
                this.basinList = res.data.map(item => {
                    const left = item.locationLeft ? item.locationLeft.split(',') : ['东经0', '北纬0'];
                    const right = item.locationRight ? item.locationRight.split(',') : ['东经0', '北纬0'];
                    return {
                        id: item.id,
                        basinName: item.basinName,
                        index: item.index,
                        leftLongitude: Number(left[0].substring(2)) || 0,
                        leftLatitude: Number(left[1].substring(3)) || 0,
                        rightLongitude: Number(right[0].substring(2)) || 0,
                        rightLatitude: Number(right[1].substring(3)) || 0,
                    };
                });
            }else{
                this.basinList = []
            }
        })
    },

    getBasinColor(basin) {
      const colors = ['color-primary', 'color-success', 'color-warning'];
      return colors[basin.id % 3];
    },

    handleEditBasin(data) {
      if(data) {
        this.isEditing = true
        this.formData = { ...data }
      }else{
        this.isEditing = false
        this.formData = { }
      }
      this.dialogVisible = true;
    },

    handleDeleteBasin(id) {
        this.$confirm('确认删除该流域？删除后无法恢复。', '提示', {
          type: 'warning',
        }).then(() => {
            DelBasin({id}).then(res=>{
                if(res.isSuccess){
                    this.$message.success('删除成功');
                    this.loadBasinData();
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        }).catch(() => {});
    },

    handleDialogClose() {
      this.dialogVisible = false;
      this.formData = {};
    },

    handleSaveBasin() {
        this.$refs['basinForm'].validate((valid) => {
            if (valid) {
                this.saving = true;
                const form = {
                    id: this.formData.id,
                    basinName: this.formData.basinName,
                    locationLeft: `东经${this.formData.leftLongitude}, 北纬${this.formData.leftLatitude}`,
                    locationRight: `东经${this.formData.rightLongitude}, 北纬${this.formData.rightLatitude}`,
                    index: this.formData.index || 0
                };
                if (this.isEditing) {
                    EditBasin(form).then(res=>{
                        if (res.isSuccess) {
                            this.handleDialogClose()
                            this.loadBasinData()
                            this.$message.success("编辑成功");
                        }else{
                            this.$message.error(res.errorMessage)
                        }
                    }).finally(()=>{
                        this.saving = false;
                    })
                } else {
                    AddBasin(form).then(res=>{
                        if (res.isSuccess) {
                            this.handleDialogClose()
                            this.loadBasinData()
                            this.$message.success("新增成功");
                        }else{
                            this.$message.error(res.errorMessage)
                        }
                    }).finally(()=>{
                        this.saving = false;
                    })
                }
            } else {
                return false;
            }
        });
    }
  }
    
};
</script>

<style lang="scss" scoped>
.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
  }
.basin-management {
    margin-top: 10px;
  .basin-list {
    .basin-card-wrapper {
      .basin-card {
        border-radius:6px;
        border: none;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        margin-bottom: 10px;
        
        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
          display: flex;
          align-items: flex-start;
          margin-bottom: 16px;
          padding-bottom: 16px;
          border-bottom: 1px solid #f0f0f0;
          
          .basin-icon-wrapper {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            flex-shrink: 0;
            
            &.color-primary {
              background: linear-gradient(135deg, #409EFF, #66b1ff);
            }
            
            &.color-success {
              background: linear-gradient(135deg, #67C23A, #85ce61);
            }
            
            &.color-warning {
              background: linear-gradient(135deg, #E6A23C, #ebb563);
            }
            
            &.color-info {
              background: linear-gradient(135deg, #909399, #a6a9ad);
            }
            
            .basin-icon {
              color: white;
              font-size: 24px;
            }
          }
          
          .basin-info {
            flex: 1;
            
            .basin-name {
              margin: 0 0 8px 0;
              color: #303133;
              font-size: 18px;
              font-weight: 600;
              line-height: 1.4;
            }
            
            .basin-id, .basin-index {
              color: #909399;
              font-size: 12px;
              margin-bottom: 4px;
              display: flex;
              align-items: center;
              
              i {
                margin-right: 4px;
              }
            }
          }
        }
        
        .basin-stats {
          display: flex;
          justify-content: space-around;
          margin-bottom: 16px;
          padding: 12px 0;
          background: #f8f9fa;
          border-radius: 8px;
          
          .stat-item {
            display: flex;
            align-items: center;
            
            .stat-icon {
              width: 36px;
              height: 36px;
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 8px;
              
              &.data-icon {
                background: linear-gradient(135deg, #409EFF, #66b1ff);
                color: white;
              }
              
              &.monitor-icon {
                background: linear-gradient(135deg, #67C23A, #85ce61);
                color: white;
              }
            }
            
            .stat-content {
              .stat-value {
                font-size: 16px;
                font-weight: bold;
                color: #303133;
              }
              
              .stat-label {
                font-size: 12px;
                color: #909399;
              }
            }
          }
        }
        
        .coordinate-info {
          .info-section {
            margin-bottom: 16px;
            
            .section-title {
              display: flex;
              align-items: center;
              margin-bottom: 12px;
              color: #606266;
              font-size: 14px;
              font-weight: 500;
              
              i {
                margin-right: 6px;
                color: #409EFF;
              }
            }
            
            .coordinate-content {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
              .coordinate-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;
                padding: 8px;
                background: #f8f9fa;
                border-radius: 6px;
                
                .coord-type {
                  display: flex;
                  align-items: center;
                  color: #909399;
                  font-size: 12px;
                  
                  i {
                    margin-right: 4px;
                  }
                }
                
                .coord-value {
                  color: #606266;
                  font-family: 'Monaco', 'Menlo', monospace;
                  font-size: 12px;
                  font-weight: 500;
                }
              }
            }
          }
        }
        
        .card-footer {
          margin-top: 16px;
          padding-top: 16px;
          border-top: 1px solid #f0f0f0;
          
          .action-buttons {
            display: flex;
            justify-content: space-around;
            margin-bottom: 12px;
          }
        }
      }
    }
  }
}

.basin-dialog {
  .basin-form {
    .form-tips {
      color: #909399;
      font-size: 12px;
      margin-top: 4px;
    }
    
    .coordinate-tips {
      background: #fdf6ec;
      border: 1px solid #faecd8;
      border-radius: 6px;
      padding: 12px 16px;
      margin-bottom: 16px;
      color: #E6A23C;
      font-size: 14px;
      
      i {
        margin-right: 8px;
      }
    }
  }
}

.basin-card {
  .coordinate-summary {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
    
    .summary-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 6px;
      
      .summary-label {
        color: #606266;
        font-size: 12px;
        font-weight: 500;
      }
      
      .summary-value {
        color: #409EFF;
        font-size: 12px;
        font-weight: 600;
        font-family: 'Monaco', 'Menlo', monospace;
      }
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>